<template>
  <div>
    <el-form inline label-width="100px">
      <el-form-item label="调整优先级" prop="level">
        <el-popover placement="right" title="拖拽条件调整优先级顺序" width="250" trigger="click">
          <draggable style="width: 100%; min-height: 25px" item-key="id" v-model="prioritySortList"
                     :component-data="{tag: 'div', type: 'transition-group'}" v-bind="dragProps">
            <template #item="{element, index}">
              <div :class="{'drag-no-choose': true, 'drag-hover': element.id === selectedNode.id}">
                <ellipsis style="width: 150px" hover-tip :content="element.name" />
                <div>优先级 {{ index + 1 }}</div>
              </div>
            </template>
          </draggable>
          <template #reference>
            <el-button :icon="Sort" size="small">第{{ nowNodeLeave + 1 }}级</el-button>
          </template>
        </el-popover>
      </el-form-item>
      <el-form-item label="条件组关系" label-width="150px">
        <el-switch v-model="config.groupsType" active-color="#409EFF" inactive-color="#c1c1c1" active-value="AND" inactive-value="OR" active-text="且" inactive-text="或">
        </el-switch>
      </el-form-item>
      <el-form-item label="条件设置模式">
        <el-radio-group v-model="config.mode">
          <el-radio label="SIMPLE">简单模式</el-radio>
          <el-radio label="UEL" disabled>逻辑表达式</el-radio>
          <el-radio label="HTTP" disabled>网络请求</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="表达式设置" v-if="config.mode === 'UEL'">
        <el-input v-model="config.expression" placeholder="使用bpmn UEL表达式构造条件"/>
        <span class="item-desc">使用表达式构建复杂逻辑，谨慎使用</span>
      </el-form-item>
    </el-form>
    <div v-if="config.mode === 'SIMPLE'">
      <el-button type="primary" :icon="Plus" style="margin: 0 15px 15px 0" round @click="addConditionGroup">
        添加条件组
      </el-button>
      <span class="item-desc">📢表单字段设置为必填才能作为审批条件</span>
      <group-item/>
    </div>
    <div v-if="config.mode === 'HTTP'">
<!--      <http-req v-model="config.http"/>-->
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import GroupItem from './ConditionGroupItemConfig.vue'
import { Plus, Sort } from '@element-plus/icons-vue'
import { computed, reactive, toRefs } from 'vue'
import { useWorkFlowConfig } from '/@/stores/workFlow'
import { storeToRefs } from 'pinia'

export default {
    name: 'ConditionNodeConfig',
    components: { 
        draggable, 
        GroupItem 
    },
    props: {
        config: {
            type: Object,
            default: () => {
                return {}
            },
        },
    },
    setup(props, context) {
        const { config } = toRefs(props)
        const storesWorkFlowConfig = useWorkFlowConfig()
        const workFlowConfig = storeToRefs(storesWorkFlowConfig)
        const state = reactive({
            dragProps:{
                animation: 300,
                disabled: false,
                sort: true,
                ghostClass: "choose",
            },
            showOrgSelect: false
        })
        const selectedNode = computed(() => {
            return workFlowConfig.selectedNode.value
        })
        const select = computed(() => {
            return config.value.assignedUser || []
        })
        const nowNodeLeave = computed(() => {
            return prioritySortList.value.indexOf(selectedNode.value)
        })
        //条件节点
        const prioritySortList = computed({
            get: () => {
                let node = workFlowConfig.nodeMap.value.get(selectedNode.value.parentId)
                if (node) {
                    return node.branchs || []
                }
                return []
            },
            set: val => {
                let node = workFlowConfig.nodeMap.value.get(selectedNode.value.parentId)
                if (node) {
                    node.branchs = val
                }
            }
        })
        const addConditionGroup = () => {
            config.value.groups.push({
                cids: [],
                groupType: 'OR',
                conditions: [],
            })
        }
        const selectUser = () => {
            state.showOrgSelect = true
        }
        const selected = (select) => {
            console.log(select)
            state.showOrgSelect = false
            select.forEach((val) => select.value.push(val))
        }
        const removeOrgItem = (index) => {
            select.value.splice(index, 1)
        }
        return {
            ...toRefs(state),
            Plus,
            Sort,
            selectedNode,
            select,
            nowNodeLeave,
            addConditionGroup,
            selectUser,
            selected,
            removeOrgItem
        }
    }
}
</script>

<style lang="scss" scoped>
.choose {
  border-radius: 5px;
  margin-top: 2px;
  background: #f4f4f4;
  border: 1px dashed #1890ff !important;
}
.drag-hover {
  color: #1890ff;
}
.drag-no-choose {
  cursor: move;
  background: #f8f8f8;
  border-radius: 5px;
  margin: 5px 0;
  height: 25px;
  line-height: 25px;
  padding: 5px 10px;
  border: 1px solid #ffffff;
  div {
    display: inline-block;
    font-size: small !important;
  }

  div:nth-child(2) {
    float: right !important;
  }
}
</style>